<template>
  <div>
    <el-divider content-position="left">基本信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="产品类型" prop="bagType">
          <el-input v-model="formData.bagType" placeholder="请输入产品类型" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="复合工艺" prop="compositeType">
          <el-input v-model="formData.compositeType" placeholder="请输入工艺" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="材质" prop="material">
          <el-input v-model="formData.material" placeholder="请输入材质" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="印刷颜色" prop="surfaceFee">
          <el-input
            v-model="formData.surfaceFee"
            placeholder="请输入印刷颜色"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单面厚度(丝)" prop="thickness" label-width="100px">
          <el-input-number
            v-model="formData.thickness"
            :min="0"
            placeholder=""
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="款数" prop="typeNum" label-width="100px">
          <el-input v-model="formData.typeNum" type="textarea" placeholder="" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item label="设计图" prop="attach" label-width="100px">
          <FileUpload v-model="formData.attach" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">规格信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="宽度(mm)" prop="w">
          <el-input-number v-model="formData.w" :min="0" placeholder="宽度" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="长度(mm)" prop="l">
          <el-input-number v-model="formData.l" :min="0" placeholder="长度" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="全展(mm)" prop="h">
          <el-input-number
            v-model="formData.h"
            :min="0"
            placeholder="全展(mm)"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="其他规格" prop="remark2">
          <el-input
            v-model="formData.remark2"
            style="width: 100%"
            maxlength="2000"
            show-word-limit
            rows="4"
            type="textarea"
            placeholder="添加其他规格信息或者任意备注"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">数量信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="数量1(个)" prop="quantity1">
          <el-input-number
            v-model="formData.quantity1"
            :min="0"
            placeholder="数量1"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量2(个)" prop="quantity2">
          <el-input-number
            v-model="formData.quantity2"
            :min="0"
            placeholder="数量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="数量3(个)" prop="quantity3">
          <el-input-number
            v-model="formData.quantity3"
            :min="0"
            placeholder="数量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 订单信息：新增模式不显示重量和总价 -->
    <el-divider v-if="!isAddMode" content-position="left">订单信息</el-divider>
    <!-- 报价员模式在status=0,1时可以修改重量 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示重量但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="重量(kg)" prop="weight1">
          <el-input-number
            v-model="formData.weight1"
            :min="0"
            placeholder="重量"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量2" prop="weight2">
          <el-input-number
            v-model="formData.weight2"
            :min="0"
            placeholder="重量2"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重量3" prop="weight3">
          <el-input-number
            v-model="formData.weight3"
            :min="0"
            placeholder="重量3"
            style="width: 100%"
            disabled
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 报价员模式在status=0,1时可以修改总价 -->
    <el-row
      v-if="
        !isAddMode &&
        isQuoteMode &&
        (formData.status === 0 || formData.status === 1 || formData.status === 3)
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 其他模式显示总价但不可编辑 -->
    <el-row
      v-if="
        !isAddMode &&
        (!isQuoteMode || (formData.status !== 0 && formData.status !== 1 && formData.status !== 3))
      "
      :gutter="20"
    >
      <el-col :span="8">
        <el-form-item label="总价(元)" prop="price1">
          <el-input-number
            v-model="formData.price1"
            :min="0"
            placeholder="总价"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice1 > 0" class="unit-price-display">
            单价：{{ unitPrice1.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价2" prop="price2">
          <el-input-number
            v-model="formData.price2"
            :min="0"
            placeholder="总价2"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice2 > 0" class="unit-price-display">
            单价：{{ unitPrice2.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="总价3" prop="price3">
          <el-input-number
            v-model="formData.price3"
            :min="0"
            placeholder="总价3"
            style="width: 100%"
            disabled
          />
          <div v-if="unitPrice3 > 0" class="unit-price-display">
            单价：{{ unitPrice3.toFixed(4) }} 元/个
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from "vue";

defineOptions({
  name: "DigitalPrintCustom",
  inheritAttrs: false,
});

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isAddMode: {
    type: Boolean,
    default: false,
  },
  isQuoteMode: {
    type: Boolean,
    default: false,
  },
});

// 单价计算
const unitPrice1 = computed(() => {
  if (!props.formData.price1 || !props.formData.quantity1 || props.formData.quantity1 <= 0) {
    return 0;
  }
  return props.formData.price1 / props.formData.quantity1;
});

const unitPrice2 = computed(() => {
  if (!props.formData.price2 || !props.formData.quantity2 || props.formData.quantity2 <= 0) {
    return 0;
  }
  return props.formData.price2 / props.formData.quantity2;
});

const unitPrice3 = computed(() => {
  if (!props.formData.price3 || !props.formData.quantity3 || props.formData.quantity3 <= 0) {
    return 0;
  }
  return props.formData.price3 / props.formData.quantity3;
});
</script>

<style scoped>
.unit-price-display {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  text-align: right;
}
</style>
